<template>
	<view class="container">
		<view class="bg">
			<view class="navtitle">
				<view class="left" @click="back"></view>
				<view class="title">
					选择车辆
				</view>
			</view>
		</view>
		<u-checkbox-group v-model="checkboxValue1" placement="column" iconPlacement="right" @change="checkboxChange">
			<view v-for="item in checkboxList1" class="carinfolist">
				<uni-card style="height: 200rpx" class="card">
					<view class="caritem">
						<image :src="item.src"></image>
						<view class="carinfo">
							<view class="carname">
								{{item.carname}}
							</view>
							<view class="chepai">
								{{item.chepai}}
							</view>
						</view>
						<view class="box">
							<u-checkbox :customStyle="{marginBottom: '8px'}" :key="item.id" :name="item.id"
								:disabled="item.disabled" shape="circle" activeColor="#ff4000">
							</u-checkbox>
						</view>
					</view>
				</uni-card>
			</view>
		</u-checkbox-group>
		<view class="bottom">
			<u-button icon="plus" type="primary"
				style="height: 70rpx;width: 90%;margin-top: 16rpx;background-color: #0662e6;"
				shape="circle">添加车辆</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				checkboxValue1: [],
				checkboxList1: [{
						id: 1,
						carname: "兰博基尼",
						src: "../../../static/user3/car1.jpeg",
						chepai: "车牌：豫M35468",
						disabled: false
					},
					{
						id: 2,
						carname: "帕拉梅拉",
						src: "../../../static/user3/car2.jpg",
						chepai: "车牌：豫M35468",
						disabled: false
					}
				]
			}
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			checkboxChange(n) {
				console.log('change', n);
			}
		}
	}
</script>

<style scoped>
	.bg {
		width: 100%;
		height: 400rpx;
		background-color: #3183fb;
		overflow: hidden;
	}

	.navtitle {
		display: flex;
		margin-top: 40rpx;
		/* border: 1px solid red; */
		align-items: center;
	}

	.navtitle .left {
		width: 28rpx;
		height: 28rpx;
		margin-left: 20rpx;
		border-left: 2px solid white;
		border-bottom: 2px solid white;
		transform: rotate(45deg);
	}

	.title {
		color: #e0ebfd;
		font-size: 42rpx;
		margin-left: 260rpx;
	}

	.caritem {
		display: flex;
		align-items: center;
	}

	.caritem image {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
	}

	.carname {
		font-size: 36rpx;
		font-weight: 700;
	}

	.chepai {
		font-size: 30rpx;
		margin-top: 10rpx;
	}

	.carinfo {
		margin-left: 30rpx;
	}

	.box {
		margin-left: 200rpx;
	}

	.u-checkbox-group {
		margin-top: -200rpx;
		/* border: 1px solid red; */
	}

	.carinfolist {
		width: 100%;
		height: 230rpx;
		/* border: 1px solid yellow; */
		display: flex;
		align-items: center;
	}

	.card {
		display: flex;
		align-items: center;
	}

	.bottom {
		position: absolute;
		bottom: 0rpx;
		width: 100%;
		height: 100rpx;
		background-color: white;
	}
</style>